<style lang='scss' scoped>
@import "@/assets/css/variable";
.addStaff {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  font-size: 1.2rem;
  overflow: auto;
  box-sizing: border-box;
  .header-box {
    border-bottom: 1px solid $border-c;
    background-color:white;
    padding: 1.4rem 1.7rem;
    .title {
      font-size: 1.8rem;
      margin-bottom: 5px;
    }
  }
  .popup_van {
    .show {
    height: auto;
    background-color: white;
    position: relative;
      .close-icon {
        position: absolute;
        width: 2.4rem;
        height: 2.4rem;
        right: 0.7rem;
        top: 0.7rem;
        border-radius: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
    }
  }
}
</style>
<template>
  <div class="addStaff padding-all-m">
    <div class="header-box border-r-l">
      <!-- <div class="title t-bold">添加员工</div> -->
      <van-field
          required
          v-model="form.name"
          label="姓名"
          placeholder="请填写您的姓名"
          input-align="right"
        />
      <van-field
          required
          v-model="form.mobile"
          label="手机号"
          placeholder="请填写您的手机号"
          input-align="right"
          maxlength="11"
        />
        <!-- <van-field
          required
          v-model="form.merchant_name"
          label="商家"
          placeholder="请填写您的商家"
          input-align="right"
          @click="merchantClick"
        /> -->
        <van-field
          required
          v-model="form.dep_name"
          label="部门"
          placeholder="请填写您的部门"
          input-align="right"
          readonly
          @click="depClick"
        />
        <van-field
          required
          v-model="form.typename"
          label="身份"
          placeholder="请填写您的身份"
          readonly
          input-align="right"
          @click="changeTypename"
        />
        <!-- <van-field
          required
          v-model="form.createtime"
          label="入职时间"
          placeholder="请填写您的入职时间"
          input-align="right"
          @click="timeClick"
        /> -->
    </div>
    <div class="add-box margT-l">
      <van-button style="border-radius: 8px;" :color="$store.getters.getMasterColor" block @click="getVerificationSave">提交</van-button>
    </div>

    <!-- 商家 -->
    <van-action-sheet
        v-model="merchantShow"
        :actions="merchantList"
        @select="onmerchantSelect"
    />

    <!-- 部门 -->
    <van-action-sheet
        v-model="depShow"
        :actions="depList"
        @select="ondepSelect"
    />


    <!-- 身份 -->
    <van-action-sheet
        v-model="showAction"
        :actions="actions"
        @select="onSelect"
    />
    <!-- 入职时间 -->
    <van-calendar v-model="timeShow" :show-confirm="false" @confirm="onConfirm" />
  </div>
</template>

<script>
import { Button, Icon, Field, Dialog, Popup, Calendar } from "vant";
export default {
  name:'StaffManage',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Field.name]: Field,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [Calendar.name]: Calendar
  },
  data() {
    return {
      status: 1,
      // openid: '',
      // merchant_id: '',
      // nickname: '',
      // avatar: '',
      form: {
        name: '', // 需手动填写
        mobile: '', // 需手动填写
        dep_name: '',
        merchant_name: '',
        typename: '',
        createtime: ''
      },
      actions: [
        { name: "经理", id: 1 },
        { name: "员工", id: 2 },
      ],
      depShow: false,
      timeShow: false,
      showAction: false,
      merchantShow: false,
      merchantList: [],
      depList: [],
      dep_id: null,
      merchant_id: null,
      type: null
    };
  },
  computed: {
    // getOpenid() {
    //   return this.$store.state.openid
    // }
  },
  // watch: {
  //   getAppid (newCount, oldCount) {
  //    // Our fancy notification (2).
  //    console.log(`We have ${newCount} openid now, yaay!`)
  //   }
  // },
  created() {
    this.getMerchantItemall()
    this.getDepartmentPage()
  },
  mounted() {
    console.log("addstaff mounted")
    console.log("openid", this.$store.state.openid)
    // this.openid = this.openid,
    // this.merchant_id = this.$route.query.merchant_id,
    // this.nickname = this.$route.query.nickname,
    // this.avatar = this.avatar,
    // this.name = this.name, // 需手动填写
    // this.mobile = this.mobile // 需手动填写
  },
  methods: {
    getMerchantItemall() {
      this.$request.getMerchantItemall().then(res => {
        this.merchantList = res.data
      })
    },
    getDepartmentPage() {
      this.$request.getDepartmentPage().then(res => {
        this.depList = res.data.data
      })
    },
    changeTypename() {
      this.showAction = true;
    },
    onmerchantSelect(value) {
      this.merchantShow = false;
      console.log(value);
      this.form.merchant_name = value.name
      this.merchant_id = value.id
    },
    ondepSelect(value) {
      this.depShow = false;
      console.log(value);
      this.form.dep_name = value.name
      this.dep_id = value.id
    },
    onSelect(value) {
      this.showAction = false;
      console.log(value);
      this.form.typename = value.name
      this.type = value.id
    },
    // 格式化日期
    formatter(day) {
      let date = new Date(day)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      const time =  y + '/' + m + '/' + d;
      console.log(time);
      this.form.createtime = time;
      return this.form.createtime
    },
    // 展示部门管理
    depClick() {
      this.depShow = true
    },
    merchantClick() {
      this.merchantShow = true
    },
    // 展示时间
    timeClick() {
      this.timeShow = true
    },
    // 拿到时间
    onConfirm(value) {
      console.log(value, 'value');
      this.formatter(value)
      // this.createtime = value
      this.timeShow = false
    },
    getVerificationSave() {
      const _this = this;
      let params = {
        openid: localStorage.getItem('OPENID'),
        merchant_id: this.$route.query.merchant_id,
        nickname: this.$store.state.userInfo.nickname,
        avatar: this.$store.state.userInfo.avatar,
        name: this.form.name, // 需手动填写
        mobile: this.form.mobile, // 需手动填写
        createtime: this.form.createtime,
        dep_id: this.dep_id,
        // merchant_id: this.merchant_id,
        type: this.type
      }
      console.log("params", params)
      this.$request.getStaffSave(params).then(res=>{
        if(res.ret==200){
          Dialog.alert({
            title: '系统提示',
            message: '添加成功',
          }).then(() => {
            // on close
            _this.$router.replace('/staffManage')
          });
        }else{
          Dialog.alert({
            title: '系统提示',
            message: res.msg
          }).then(() => {
            // on close
          });
        }
      })
    }  
  },
};
</script>